<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/vue.js"></script>
</head>
<body>
  <div id="app">
    <my-com></my-com>
    <!-- 不管定义组件是使用的 短横线方式还是大驼峰式，在html模版中，只能使用 短横线方式 -->
    <!-- <MyCom></MyCom> -->
  </div>
</body>
<script>

  // 全局注册组件
  // Vue.component('组件名称', 组件选项)
  // 组件是特殊的vue实例
  // 特殊 data 是一个函数，必须返回一个对象
  // Vue.component('my-com', {
  //   template: `<h1>hello world - {{ msg }}</h1>`,
  //   data () {
  //     return {
  //       msg: '您好'
  //     }
  //   }
  // })
  Vue.component('MyCom', {
    template: `<h1>hello world - {{ msg }}</h1>`,
    data () {
      return {
        msg: '您好'
      }
    }
  })
  new Vue({
    el: '#app',
    data: {}
  })
</script>
</html>